<template>
	<page-meta
		:page-style="`pointer-events:${is_loading>0?'none':'unset'};overflow:${is_shadow?'hidden':'visible'};z-index:${is_shadow?'1000':''}`">
	</page-meta>
	<zkView ref="zkView" v-slot:zkView>
		<view class="container">
			<view class="mainBox">
				<view class="topBox">
					<image src="@/static/home/top.jpg" mode="widthFix" />
					<view class="topTxt">
						<scroll-view scroll-y class="nameList" :scroll-top="scrollTop" scroll-with-animation
							@touchstart="stopScroll" @touchend="startScroll">
							<view v-for="(name, index) in scrollData" :key="index" class="nameItem">
								{{ name }} 刚刚申领成功
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="addrBox">
					<view class="addrTitle">收货地址</view>
					<view class="addrRow">
						<view class="rowName">收件人:</view>
						<view class="rowInput">
							<input v-model="username" type="text" placeholder="请输入收件人" placeholder-style="color:#C4C4C8"
								autoComplete="false" cursor-spacing="60">
						</view>
					</view>
					<view class="addrRow">
						<view class="rowName">联系方式:</view>
						<view class="rowInput">
							<input v-model="phone" type="tel" placeholder="请输入联系方式" placeholder-style="color:#C4C4C8"
								autoComplete="false" cursor-spacing="60">
						</view>
					</view>
					<view class="addrRow">
						<view class="rowName">所在地区:</view>
						<view class="rowInput rowRight">
							<picker mode="region" value="{{region}}" @change="bindRegionChange">
								<text v-if="region&&region.length">{{region[0]}} {{region[1]}} {{region[2]}}</text>
								<text v-else style="color: #C4C4C8;">请选择所在地区</text>
							</picker>
						</view>
					</view>
					<view class="addrRow">
						<view class="rowName">详细地址:</view>
						<view class="rowInput">
							<input v-model="address" type="text" placeholder="请输入详细地址" placeholder-style="color:#C4C4C8"
								autoComplete="false" cursor-spacing="60">
						</view>
					</view>
					<view class="addrBtn">
						<button type="button" class="button" id="onApply" @click="onApply">
							<image src="@/static/home/btn.png" mode="widthFix" />
						</button>
					</view>
				</view>
				<view class="stepBox">
					<image src="@/static/home/step0.jpg" mode="widthFix" />
					<view class="stepTitle">Q：号码如何预检？</view>
					<view class="stepText">1.
						您在当前页面完成流量卡办理后，系统会发放一组号码给您，您需复制该号码，并识别下方二维码进入预检页面，按下图所示勾选1、2两处勾选按钮，然后点击“立即办理”按钮进入下一步页面。
					</view>
					<image src="@/static/home/step1.jpg" mode="widthFix" />
					<view class="stepText">2. 您在下图页面填写/粘贴您上一步收到的号码，并按页面提示上传您的现场自拍照、身份证正反面照片、填写您的个人信息，点击“提交订单”按钮并支付完成办理。
					</view>
					<image src="@/static/home/step2.jpg" mode="widthFix" />
					<view class="stepTitle">Q：如何实名激活？</view>
					<view class="stepText">
						在您收到流量卡后，可微信扫描卡套上的激活二维码或点击平台(10016)发送的手机卡开户成功短信中的链接，进入实名认证页面。根据页面提示填写iccid后7位数字和身份证后6位，点击“下一步”按钮，根据提示完成视频认证即可。
					</view>
					<image src="@/static/home/step3.jpg" mode="widthFix" />
				</view>
			</view>

		</view>
	</zkView>
</template>

<script>
	import indexJs from './index.js';
	export default {
		components: {},
		computed: {},
		...indexJs
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>